let form = {
    mainWidth: 400,
    mainHeight: 600,
    area: [
        {
            name: 'A',
            x1: 0,
            y1: 600,
            x2: 400,
            y2: 400,
            point: [
                {name: 'AA', x1: 0, y1: 600, x2: 50, y2: 550},
                {name: 'AB', x1: 50, y1: 600, x2: 100, y2: 550},
            ]
        },
        {
            name: 'B',
            x1: 0,
            y1: 400,
            x2: 400,
            y2: 200,
            point: [
                {name: 'AA', x1: 0, y1: 600, x2: 50, y2: 550},
            ]
        },
        {
            name: 'C',
            x1: 0,
            y1: 200,
            x2: 400,
            y2: 0,
            point: [
                {name: 'AA', x1: 0, y1: 600, x2: 50, y2: 550},
            ]
        }
    ]
}
我正在使用vue2的el-elementui编程，我想用一个form生成以上的数据结构，要求mainWidth的label值为"PANEL宽度"，mainHeight的lable值为"PANEL高度",其中area的label用区域来区分，区域是动态添加的，默认有一个添加区域的按钮，点击添加区域在area这个数组新增一组对象值，area对象结构如下：{
    {
        name: 'A',
        x1: 0,
        y1: 600,
        x2: 400,
        y2: 400,
        point: [
        {name: 'AA', x1: 0, y1: 600, x2: 50, y2: 550},]
    },
},
name为区域名称，x1的lable为区域左上角坐标x,y1为区域左上角坐标y,x2为区域右下角坐标x,y2为区域右下角坐标y,point的label为区域点位，point对象结构如下： {name: 'AA', x1: 0, y1: 600, x2: 50, y2: 550},
name为点位名称，x1的label为点位左上角坐标x,y1为点位左上角坐标y,x2为点位右下角坐标x,y2为点位右下角坐标y。point也是可以动态添加的，有一个添加点位的按钮。

总体交互为开始是先添加区域，点击之后再在区域里面添加点位。区域和点位都可以删除，可以做成那种动态表单的形式。布局上有层次感一点，就用el-form这一套
